Split out "AppIcon" and make WellDisplayItem a subclass of it

diff --git a/js/ui/Makefile.am b/js/ui/Makefile.am
index b9185668acc28fea61d3fa9dd7d65ae359ecfb22..0d92e44844e2689267ebe8e9ce50f9d6b4f04d00 100644 (file)
--- a/js/ui/Makefile.am
+++ b/js/ui/Makefile.am
@@ -3,6 +3,7 @@ jsuidir = $(pkgdatadir)/js/ui
 dist_jsui_DATA =               \
        altTab.js               \
        appDisplay.js           \
+       appIcon.js              \
        button.js               \
        chrome.js               \
        dash.js                 \

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 7930f5d720f37ba94424878889dbe0fcc0ced98b..8af912b3e918c08b7b8f559425d63edc625eb1cb 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -14,6 +14,7 @@ const Mainloop = imports.mainloop;
 const Gettext = imports.gettext.domain('gnome-shell');
 const _ = Gettext.gettext;
 
+const AppIcon = imports.ui.appIcon;
 const DND = imports.ui.dnd;
 const GenericDisplay = imports.ui.genericDisplay;
 const Main = imports.ui.main;
@@ -22,12 +23,6 @@ const Workspaces = imports.ui.workspaces;
 const ENTERED_MENU_COLOR = new Clutter.Color();
 ENTERED_MENU_COLOR.from_pixel(0x00ff0022);
 
-const GLOW_COLOR = new Clutter.Color();
-GLOW_COLOR.from_pixel(0x4f6ba4ff);
-const GLOW_PADDING = 5;
-
-
-const APP_ICON_SIZE = 48;
 const WELL_DEFAULT_COLUMNS = 4;
 const WELL_ITEM_HSPACING = 0;
 const WELL_ITEM_VSPACING = 4;
@@ -459,72 +454,18 @@ function WellDisplayItem(appInfo, isFavorite) {
 }
 
 WellDisplayItem.prototype = {
+    __proto__ : AppIcon.AppIcon.prototype,
+
     _init : function(appInfo, isFavorite) {
-        this.appInfo = appInfo;
+        AppIcon.AppIcon.prototype._init.call(this, appInfo);
 
         this.isFavorite = isFavorite;
 
-        this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                   corner_radius: 2,
-                                   border: 0,
-                                   padding: 1,
-                                   border_color: GenericDisplay.ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR,
-                                   reactive: true });
-        this.actor._delegate = this;
         this.actor.connect('button-release-event', Lang.bind(this, function (b, e) {
             this._handleActivate();
         }));
 
         let draggable = DND.makeDraggable(this.actor);
-
-        let iconBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                    x_align: Big.BoxAlignment.CENTER,
-                                    y_align: Big.BoxAlignment.CENTER });
-        this._icon = appInfo.create_icon_texture(APP_ICON_SIZE);
-        iconBox.append(this._icon, Big.BoxPackFlags.NONE);
-
-        this.actor.append(iconBox, Big.BoxPackFlags.EXPAND);
-
-        this._windows = Shell.AppMonitor.get_default().get_windows_for_app(appInfo.get_id());
-
-        let nameBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                    x_align: Big.BoxAlignment.CENTER });
-        this._nameBox = nameBox;
-
-        this._name = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
-                                        font_name: "Sans 12px",
-                                        line_alignment: Pango.Alignment.CENTER,
-                                        ellipsize: Pango.EllipsizeMode.END,
-                                        text: appInfo.get_name() });
-        nameBox.append(this._name, Big.BoxPackFlags.NONE);
-        if (this._windows.length > 0) {
-            let glow = new Shell.DrawingArea({});
-            glow.connect('redraw', Lang.bind(this, function (e, tex) {
-                Shell.draw_app_highlight(tex,
-                                         this._windows.length,
-                                         GLOW_COLOR.red / 255,
-                                         GLOW_COLOR.green / 255,
-                                         GLOW_COLOR.blue / 255,
-                                         GLOW_COLOR.alpha / 255);
-            }));
-            this._name.connect('notify::allocation', Lang.bind(this, function () {
-                let x = this._name.x;
-                let y = this._name.y;
-                let width = this._name.width;
-                let height = this._name.height;
-                // If we're smaller than the allocated box width, pad out the glow a bit
-                // to make it more visible
-                if ((width + GLOW_PADDING * 2) < this._nameBox.width) {
-                    width += GLOW_PADDING * 2;
-                    x -= GLOW_PADDING;
-                }
-                glow.set_size(width, height);
-                glow.set_position(x, y);
-            }));
-            nameBox.add_actor(glow);
-            glow.lower(this._name);
-        }
-        this.actor.append(nameBox, Big.BoxPackFlags.NONE);
     },
 
     _handleActivate: function () {
@@ -552,7 +493,7 @@ WellDisplayItem.prototype = {
     },
 
     getDragActor: function(stageX, stageY) {
-        return this.appInfo.create_icon_texture(APP_ICON_SIZE);
+        return this.appInfo.create_icon_texture(this._icon.height);
     },
 
     // Returns the original icon that is being used as a source for the cloned texture

diff --git a/js/ui/appIcon.js b/js/ui/appIcon.js
new file mode 100644 (file)
index 0000000..12ac9b3
--- /dev/null
+++ b/js/ui/appIcon.js
@@ -0,0 +1,83 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+const Big = imports.gi.Big;
+const Clutter = imports.gi.Clutter;
+const Pango = imports.gi.Pango;
+const Shell = imports.gi.Shell;
+const Lang = imports.lang;
+
+const GenericDisplay = imports.ui.genericDisplay;
+const Main = imports.ui.main;
+
+const GLOW_COLOR = new Clutter.Color();
+GLOW_COLOR.from_pixel(0x4f6ba4ff);
+const GLOW_PADDING = 5;
+
+const APP_ICON_SIZE = 48;
+
+function AppIcon(appInfo) {
+    this._init(appInfo);
+}
+
+AppIcon.prototype = {
+    _init : function(appInfo) {
+        this.appInfo = appInfo;
+
+        this.actor = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
+                                   corner_radius: 2,
+                                   border: 0,
+                                   padding: 1,
+                                   border_color: GenericDisplay.ITEM_DISPLAY_SELECTED_BACKGROUND_COLOR,
+                                   reactive: true });
+        this.actor._delegate = this;
+
+        let iconBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
+                                    x_align: Big.BoxAlignment.CENTER,
+                                    y_align: Big.BoxAlignment.CENTER });
+        this._icon = appInfo.create_icon_texture(APP_ICON_SIZE);
+        iconBox.append(this._icon, Big.BoxPackFlags.NONE);
+
+        this.actor.append(iconBox, Big.BoxPackFlags.EXPAND);
+
+        this._windows = Shell.AppMonitor.get_default().get_windows_for_app(appInfo.get_id());
+
+        let nameBox = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
+                                    x_align: Big.BoxAlignment.CENTER });
+        this._nameBox = nameBox;
+
+        this._name = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
+                                        font_name: "Sans 12px",
+                                        line_alignment: Pango.Alignment.CENTER,
+                                        ellipsize: Pango.EllipsizeMode.END,
+                                        text: appInfo.get_name() });
+        nameBox.append(this._name, Big.BoxPackFlags.NONE);
+        if (this._windows.length > 0) {
+            let glow = new Shell.DrawingArea({});
+            glow.connect('redraw', Lang.bind(this, function (e, tex) {
+                Shell.draw_app_highlight(tex,
+                                         this._windows.length,
+                                         GLOW_COLOR.red / 255,
+                                         GLOW_COLOR.green / 255,
+                                         GLOW_COLOR.blue / 255,
+                                         GLOW_COLOR.alpha / 255);
+            }));
+            this._name.connect('notify::allocation', Lang.bind(this, function () {
+                let x = this._name.x;
+                let y = this._name.y;
+                let width = this._name.width;
+                let height = this._name.height;
+                // If we're smaller than the allocated box width, pad out the glow a bit
+                // to make it more visible
+                if ((width + GLOW_PADDING * 2) < this._nameBox.width) {
+                    width += GLOW_PADDING * 2;
+                    x -= GLOW_PADDING;
+                }
+                glow.set_size(width, height);
+                glow.set_position(x, y);
+            }));
+            nameBox.add_actor(glow);
+            glow.lower(this._name);
+        }
+        this.actor.append(nameBox, Big.BoxPackFlags.NONE);
+    }
+};